<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=0">
<head>
	<title>快快数据</title>
	<script src="js/vue.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="http://101.200.201.27/adm/rd/js/echarts.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<script src="js/jquery.datatables.min.js"></script>
	<script src="js/md5.js"></script>
	<script src="https://unpkg.com/vue-easytable/umd/js/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="js/fn.js"></script>
	<script src="http://101.200.201.27/adm/rd/js/rd.js"></script>
	<script src="http://101.200.201.27/adm/rd/js/chart-options.js"></script>

	
	<link rel="stylesheet" type="text/css" href="css/flex.css">
	<link rel="stylesheet" type="text/css" href="css/normal.css">
	<link rel="stylesheet" href="https://unpkg.com/vue-easytable/umd/css/index.css"> 
</head>
<style>
	/* public css */
	.line { display: flex; align-items: center; justify-content: flex-start;  }

	/* page */
	.container { position: absolute; width: 96%; height: 100%; margin-left: 2%; background-color: #f0f0f0; min-width: 1024px;}

	/* hearder */
	header.line { width: 100%; height: 90px;  border-bottom: 1px solid lightgrey; justify-content: space-between; padding: 20px; }
	.logininfo { width: 400px; text-align: right; }
	.logininfo span { display: inline-block; width: 80px; font-size: 16px; font-weight: 200px; color: darkorange; }
	.mainTitle { font-size: 36px; color: darkorange; text-shadow: 1px 1px 3px #333; font-weight: bolder; }
	.logininfo button { width: 80px; min-width: 60px; font-size: 14px; background: none; border: none; cursor: pointer;  }
	.logininfo button:hover { color: red; }

	/* body */
	article.body { width: 100%; height: calc(100% - 90px);}
	.nav { flex-basis: 200px; height: 100%; background-color: #ccc; }
	nav { width: 100%; min-height: 800px; line-height: 36px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; }
	nav button { background: none; border: none; width: 100px; cursor: pointer; margin: 0 10px; font-size: 14px; font-weight: bold; text-align: left;}
	nav button.small { font-size: 14px; font-weight: 400; margin-left: 40px;}
	nav button.choosed { color: darkorange; font-weight: bolder;}
	
	.main { width: 100%; height: 100%; overflow: auto;  }
	main { width: 96%; margin: 20px 20px 40px;  }
	
	span.plus_symbol { font-family: "arial black";}
	
	/* footer */
	/* footer { width: 100%; height: 30px; background: lightcyan; border-top: 1px solid lightgrey;} */

</style>
<body>
	<div class="container">

		<header class="line" id="header_vm">
			<div class="mainTitle">快快数据统计分析平台</div>
			<div class="logininfo" v-show="showUserInfo">
				<span class="username">{{userlogin.userName}}</span>
				<button class="changepassword" @click="navito('login', 'changepassword')">修改密码</button>
				<button class="logout" @click="navito('login', 'login')">退出登录</button>
				<button class="operation_users" v-if="isAdmin" @click="navito('login', 'operation_users')">用户管理</button>
			</div>
		</header>
		<article class="body line">
			<div class="nav" v-if="showMenu">
				<nav id="nav_vm">
					<div v-for="item in mainmenu" v-if="showMenu">
						<button :class="(item.type == 'dir' ? 'dir ': '') + (curpage == item.value ? 'choosed' : '')" @click="clickMenuItem(item)">
							<span>{{item.type == 'dir' ? (item.value == 'open' ? '－ ' : '＋ ') : '　 '}}</span>{{item.name}}
						</button>
						<div v-if="item.type == 'dir' && item.value == 'open'" v-for="i in item.children">
							<button :class="'small ' + (curpage == i.value ? 'choosed' : '')" @click="clickMenuItem(i)">{{i.name}}</button>
						</div>
					</div>
				</nav>
			</div>
			<div class="main">
				<main></main>
			</div>
		</article>
	</div>
</body>
</html>
<script>
	// 在首页定义全局公共变量
	var dataDomain = "http://101.200.201.27/adm/kkdata/kap/"; // 后端数据接口host


	var nav_vm = new Vue({
		el: '#nav_vm',
		data: {
			mainmenu: [
				{name: '健康贡献', type: 'page', value: 'incomes'},
				{name: '体验课预约', type: 'page', value: 'ty_classes'},
				{name: '用户画像', type: 'page', value: 'users'},
				{name: '运营统计', type: 'dir', value: 'close', children: [
					{name: '横向对比', type: 'page', value: 'iv'},
					{name: '纵向对比', type: 'page', value: 'iv2'},
				]},
			],
			userlogin: {userName: ""},
			showMenu: false,
			curpage: "",
		}, 
		methods: {
			clickMenuItem: function(item){ 
				console.log(item)
				if(item.type == 'page'){
					this.curpage = item.value;
					header_vm.navito('page', item.value);
				}else{
					if(item.value == 'open'){
						item.value = 'close'
					}else{
						item.value = 'open'
					}
				}
				
			},
			
		},
		mounted(){

		}
	})	

	var header_vm = new Vue({
		el: '#header_vm',
		data: {
			userlogin: {userName: ""},
			showUserInfo: false,
			isAdmin: false,
		},
		methods: {
			navito: function(path, filename){
				var fname = path + "/" + filename + ".html"
				$("main").load(fname, function(){
					console.log(fname)
				})
			}
		},
		mounted(){
			// 未登录，则进入登录页，不需初始化Vue结构
			if(! sessionStorage["userlogin"]){ 
				nav_vm.showMenu = false;
				navito("login", "login");
			}else{
				nav_vm.showMenu = true;
				this.userlogin = JSON.parse(sessionStorage["userlogin"]);
				this.showUserInfo = true;
				if(this.userlogin.user_type == 11 || this.userlogin.user_type == 12){
					// 然后直接引导至体验课预约页面
					navito("pages", "ty_classes");
				}else{
					// this.mainmenu = mainmenu;
				}
				// 是否是管理员
				if(this.userlogin.user_type == 1){
					this.isAdmin = true;
				}
			}

		}
	})




</script>

<!-- <script src="js/auto_update_datas.js"></script> -->
